<template>
  <div>
    <Header />
    <Right />
    <div class="zoon"></div>
    <!-- 搜索条件 -->
    <div class="screen">
      <!-- input -->
      <div class="query">
        <input
          type="text"
          class="ipt"
          v-model="title"
          placeholder="区域/小区/商圈/关键字"
          @keyup.enter="Onipt"
        />
        <p class="btn" @click="Onipt">开始找房</p>
      </div>
      <!-- 搜查条件 -->
      <div class="condition">
        <!-- 位置 -->
        <div class="list">
          <p class="text">位置</p>
          <div>
            <p class="choice">区域</p>
            <div class="details">
              <p
                v-for="(item, index) in areaList"
                :key="index"
                @click="Onarea(item)"
                :class="[countyId == item.id ? 'details_color' : '']"
              >{{ item.name }}</p>
            </div>
            <div>
              <div class="details">
                <p
                  v-for="(item, index) in allTwoHouse"
                  :key="index"
                  @click="OnTwoHouse(item)"
                  :class="[businessAreaId == item.id ? 'details_color' : '']"
                >{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 车位 -->
        <!-- <div class="list">
          <p class="text">车位</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in parking"
                :key="index"
                :class="[parkId == item.id ? 'details_color' : '']"
                @click="Onpark(item)"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>-->
        <!-- 户型 -->
        <div class="list">
          <p class="text">户型</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in roomList"
                :key="index"
                :class="[roomId == item.id ? 'details_color' : '']"
                @click="Onroom(item)"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <!-- 价格 -->
        <div class="list">
          <p class="text">价格</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in priceList"
                :key="index"
                :class="[priceId == item.id ? 'details_color' : '']"
                @click="Onprice(item)"
              >{{ item.name }}</p>
            </div>
            <p class="fillIn">
              <input type="text" class="ipt" v-model="minprice" />
              ~
              <input type="text" class="ipt" v-model="maxprice" />
              万元
              <span class="choice btn" @click="Onbtnprice">确定</span>
            </p>
          </div>
        </div>
        <!-- 面积 -->
        <div class="list">
          <p class="text">面积</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in squareList"
                :key="index"
                :class="[squareId == item.id ? 'details_color' : '']"
                @click="Onsquare(item)"
              >{{ item.name }}</p>
            </div>
            <p class="fillIn">
              <input type="text" class="ipt" v-model="minsquare" />
              ~
              <input type="text" class="ipt" v-model="maxsquare" />
              ㎡
              <span class="choice btn" @click="Onbtnsquare">确定</span>
            </p>
          </div>
        </div>
        <!-- 状态 -->
        <div class="list">
          <p class="text">状态</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in startList"
                :key="index"
                :class="[startId == item.id ? 'details_color' : '']"
                @click="Onstart(item)"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <!-- 阶段 -->
        <div class="list">
          <p class="text">阶段</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in stageList"
                :key="index"
                :class="[stageId == item.id ? 'details_color' : '']"
                @click="Onstage(item)"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <!-- 是否限购 -->
        <div class="list">
          <p class="text">是否限购</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in quotaList"
                :key="index"
                :class="[quotaId == item.id ? 'details_color' : '']"
                @click="Onquota(item)"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <!-- 开拍时间 -->
        <div class="list">
          <p class="text">开拍时间</p>
          <div>
            <div class="details">
              <p
                v-for="(item, index) in timeList"
                :key="index"
                :class="[timeId == item.id ? 'details_color' : '']"
                @click="Ontime(item)"
              >{{ item.name }}</p>
            </div>
            <p class="fillIn">
              <input type="date" class="ipt1" v-model="mintime" />
              ~
              <input type="date" class="ipt1" v-model="maxtime" />
              <span class="choice btn" @click="Onbtntime">确定</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 您已选择 -->
    <div class="selected">
      <div class="select_left">
        <span>您已选择：</span>
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          @close="handleClose(tag)"
          v-if="tag.name"
        >{{ tag.name }}</el-tag>
      </div>
      <p class="select_right" @click="Onempty">清空条件</p>
    </div>
    <!-- 广告位 -->
    <div class="advert">
      <img src="../../assets/img/advert.png" alt @click="Onadvert" />
    </div>
    <!-- 房屋 -->
    <div class="houseList" v-if="allHouse">
      <p class="house_fill">
        <span
          @click="Onorder('默认排序')"
          :class="[order== 'sell_time_d'?'orderColor':'orderSpan']"
        >默认排序</span>
        <span
          @click="Onorder('最新发布')"
          :class="[order== 'create_time_a'?'orderColor':'orderSpan']"
        >最新发布</span>
        <span
          @click="Onorder('开拍时间')"
          :class="[order== 'sell_time_a' ||order== 'sell_time_d'?'orderColor':'orderSpan']"
        >
          开拍时间
          <i class="el-icon-top" v-if="order != 'sell_time_a' && order!= 'sell_time_d'"></i>
          <i class="el-icon-top" v-if="order == 'sell_time_a'"></i>
          <i class="el-icon-bottom" v-if="order == 'sell_time_d'"></i>
        </span>
        <span
          @click="Onorder('房屋总价')"
          :class="[order== 'price_a' ||order== 'price_d'?'orderColor':'orderSpan']"
        >
          房屋总价
          <i class="el-icon-top" v-if="order!= 'price_a' && order!= 'price_d'"></i>
          <i class="el-icon-top" v-if="order == 'price_a'"></i>
          <i class="el-icon-bottom" v-if="order == 'price_d'"></i>
        </span>
        <span
          @click="Onorder('房屋单价')"
          :class="[order== 'avg_price_a' ||order== 'avg_price_d'?'orderColor':'orderSpan']"
        >
          房屋单价
          <i class="el-icon-top" v-if="order!= 'avg_price_a' &&order!= 'avg_price_d'"></i>
          <i class="el-icon-top" v-if="order== 'avg_price_a'"></i>
          <i class="el-icon-bottom" v-if="order== 'avg_price_d'"></i>
        </span>
        <span
          @click="Onorder('房屋面积'), (this.area = !this.area)"
          :class="[order== 'area_a' ||order== 'area_d'?'orderColor':'orderSpan']"
        >
          房屋面积
          <i class="el-icon-top" v-if="order!= 'area_a' &&order!= 'area_d'"></i>
          <i class="el-icon-top" v-if="order == 'area_a'"></i>
          <i class="el-icon-bottom" v-if="order == 'area_d'"></i>
        </span>
      </p>
      <div>
        <div class="house_list" ref="multipleTable">
          <div class="list" v-for="(item, index) in allHouse" :key="index">
            <div class="price_img">
              <img
                :src="item.img[0]"
                alt
                class="home_img"
                v-if="item.img"
                @click="onDetails(item.id)"
              />
              <img src="../../assets/img/demo.png" alt v-else class="home_img" />
              <p
                class="soon"
                :class="[
                  item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed'
                ]"
              >{{ item.sellStage }}</p>
              <img
                :src="[
                  item.ynFollow != 1
                    ? require(`@/assets/img/wdgzb_2.png`)
                    : require(`@/assets/img/ygz_2.png`)
                ]"
                alt
                @click="Onfollow(item, index)"
                class="heart"
              />
              <p class="home" v-if=" item.houseStageName ">{{ item.houseStageName }}</p>
              <p class="time">开拍时间：{{ item.startSaleTimeStr }}</p>
            </div>
            <div @click="onDetails(item.id)">
              <p class="list_title">{{item.title}}</p>
              <p>
                <span class="hall">{{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅</span>
                <span class="centare" v-if="item.coveredArea ">{{ item.coveredArea }}㎡</span>
                <span class="orientation" v-if="item.directionName">朝{{ item.directionName }}</span>
              </p>
              <p class="price">
                市场价：
                <span v-if=" item.marketSalePrice">{{ item.marketSalePrice }}</span>
                <span v-else>--</span>万
              </p>
              <div class="startPrice">
                <p class="start">
                  起拍价：
                  <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                  <span v-else>--</span>
                </p>
                <img src="../../assets/img/zxzx.png" alt @click="On53" />
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="9"
            v-if="pageshow"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="houseList" v-else>暂无数据</div>
    <!-- 广告位 -->
    <div class="advert">
      <!-- <img src="../../assets/img/manager.png" alt /> -->
    </div>
    <div v-if="abalse">
      <helpMe @Onhelp="Onhelp" />
    </div>
    <Recommend id="1" />
    <el-dialog
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="30%"
      class="sign_dialog"
      :close-on-click-modal="true"
    >
      <LoginName v-on:OndialogTable="Ondiong" />
    </el-dialog>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
import Recommend from "@/components/pc_file/recommend.vue";
import helpMe from "@/components/pc_file/dialog/helpMe.vue";
import LoginName from "@/components/pc_file/dialog/sign.vue";
export default {
  name: "allRooms",
  data() {
    return {
      abalse: false,
      img: [],
      quotaId: "",
      dialogTableVisible: false,
      input: "",
      total: 0,
      page: 1,
      title: "", //标题
      areaList: [], //区域list
      countyId: "", //区域
      countyName: "不限",
      parkId: "", //车位
      roomId: "", //居室
      priceId: "", //价格
      minprice: "",
      maxprice: "",
      squareId: "", //面积
      minsquare: "",
      maxsquare: "",
      startId: "", //状态
      stageId: "", //阶段
      timeId: "", //开拍时间
      mintime: "",
      businessAreaId: "",
      maxtime: "",
      countyTwoId: "",
      order: "sell_time_d",
      time: true,
      price: true,
      unitPrice: true,
      area: true,
      tags: [
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" }
      ],
      allHouse: [],
      allTwoHouse: [],
      unlimited: [
        {
          id: "",
          name: "不限"
        }
      ],
      quotaList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "限购"
        },
        {
          id: "2",
          name: "不限购"
        }
      ],
      // 车位
      parking: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "1车位"
        },
        {
          id: "2",
          name: "2车位"
        }
      ],
      // 居室
      roomList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "1居室"
        },
        {
          id: "2",
          name: "2居室"
        },
        {
          id: "3",
          name: "3居室"
        },
        {
          id: "4",
          name: "4居室"
        },
        {
          id: "5",
          name: "5居室"
        },
        {
          id: "6",
          name: "5居室以上"
        }
      ],
      //价格
      priceList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "0~200",
          name: "200万以下"
        },
        {
          id: "200~300",
          name: "200-300万"
        },
        {
          id: "300~500",
          name: "300-500万"
        },
        {
          id: "500~800",
          name: "500-800万"
        },
        {
          id: "800~1000",
          name: "800-1000万"
        },
        {
          id: "1000~100000",
          name: "1000万以上"
        }
      ],
      // 面积
      squareList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "0~20",
          name: "20㎡以下"
        },
        {
          id: "50~70",
          name: "50㎡~70㎡"
        },
        {
          id: "70~90",
          name: "70㎡~90㎡"
        },
        {
          id: "90~120",
          name: "90㎡~120㎡"
        },
        {
          id: "120~140",
          name: "120㎡~140㎡"
        },
        {
          id: "140~160",
          name: "140㎡~160㎡"
        },
        {
          id: "160~200",
          name: "160㎡~200㎡"
        },
        {
          id: "200~100000",
          name: "200㎡以上"
        }
      ],
      // 状态
      startList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "即将拍卖"
        },
        {
          id: "2",
          name: "正在拍卖"
        },
        {
          id: "3",
          name: "拍卖结束"
        }
      ],
      //阶段
      stageList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "一拍"
        },
        {
          id: "2",
          name: "二拍"
        },
        {
          id: "3",
          name: "三拍"
        },
        {
          id: "4",
          name: "变卖"
        },
        {
          id: "5",
          name: "成交"
        },
        {
          id: "6",
          name: "流拍"
        }
      ],
      allTwoList: [],
      //时间
      timeList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "3days",
          name: "最近3天"
        },
        {
          id: "7days",
          name: "最近7天"
        },
        {
          id: "30days",
          name: "最近30天"
        }
      ],
      pageshow: true
    };
  },
  mounted() {
    this.title = this.$route.params.title;

    if (this.title) {
      this.Onsearch();
      // this.tags[0].name = this.title;
    } else {
      this.OngetHouseList();
    }
    this.OngetListByPid();
  },
  methods: {
    Ondiong() {
      console.log("111");
      // childValue就是子组件传过来的值
      this.dialogTableVisible = false;
      this.photo = sessionStorage.getItem("photo");
    },
    search() {
      this.page = 1;
      this.pageshow = false;

      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    Onadvert() {
      this.abalse = true;
    },
    Onhelp() {
      this.abalse = false;
    },
    On53() {
      window.open(
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
        "_blank"
      );
      this.stopBubbling(event);
    },
    stopBubbling(e) {
      e = window.event || e;
      if (e.stopPropagation) {
        e.stopPropagation(); //阻止事件 冒泡传播
      } else {
        e.cancelBubble = true; //ie兼容
      }
    },
    Onorder(val) {
      this.orderName = val;
      if (val == "最新发布") {
        this.order = "create_time_a";
      } else if (val == "开拍时间") {
        this.time = !this.time;
        if (this.time == true) {
          this.order = "sell_time_a";
        } else {
          this.order = "sell_time_d";
        }
      } else if (val == "房屋总价") {
        this.price = !this.price;
        if (this.price == true) {
          this.order = "price_a";
        } else {
          this.order = "price_d";
        }
      } else if (val == "房屋单价") {
        this.unitPrice = !this.unitPrice;
        if (this.unitPrice == true) {
          this.order = "avg_price_a";
        } else {
          this.order = "avg_price_d";
        }
      } else if (val == "房屋面积") {
        this.area = !this.area;
        if (this.area == true) {
          this.order = "area_a";
        } else {
          this.order = "area_d";
        }
      } else if (val == "默认排序") {
        this.order = "sell_time_d";
      }
      this.OngetHouseList();
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      document.body.scrollTop = document.documentElement.scrollTop = 500;
      if (this.title) {
        this.Onsearch();
      } else {
        this.OngetHouseList();
      }
    },
    Onfollow(val, idx) {
      if (val.ynFollow == 0) {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
        this.dialogTableVisible = true;
      } else if (val.ynFollow == 1) {
        this.instance
          .cancelHouseFollow({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OngetHouseList();
            }
          })
          .catch(function(error) {});
      } else {
        this.instance
          .addHouseFollow({
            houseId: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OngetHouseList();
            }
          })
          .catch(function(error) {});
      }
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    // 清空
    Onempty() {
      this.title = "";
      this.countyId = ""; //区域
      (this.businessAreaId = ""), (this.parkId = ""); //车位
      this.roomId = ""; //卧室数量
      this.priceId = ""; //价格
      this.minprice = "";
      this.maxprice = "";
      this.minsquare = "";
      this.maxsquare = "";
      this.mintime = "";
      this.maxtime = "";
      this.squareId = ""; //面积
      this.startId = ""; //状态
      this.stageId = ""; //阶段
      this.timeId = ""; //时间
      this.quotaId = "";
      this.tags = [
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" }
      ];
      this.OngetHouseList();
    },
    // 首页查询接口
    Onsearch() {
      this.instance
        .search({
          title: this.title,
          page: this.page,
          limit: 9,
          order: this.order
        })
        .then(res => {
          this.total = res.data.count;
          this.allHouse = res.data.data;
          this.allHouse.forEach(item => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    // 区域接口
    OngetListByPid() {
      const that = this;
      this.instance
        .getListByPid({ id: "0" })
        .then(res => {
          let areaList = this.unlimited;
          Array.prototype.push.apply(areaList, res.data.data);
          that.areaList = areaList;
        })
        .catch(function(error) {});
    },
    // 全部房源
    OngetHouseList() {
      this.instance
        .getHouseList({
          keyword: "", //搜索框
          countyId: this.countyId, //区域
          businessAreaId: this.businessAreaId,
          parkingCount: this.parkId, //车位
          bedRoomCount: this.roomId, //卧室数量
          priceRange: this.priceId, //价格
          areaRange: this.squareId, //面积
          sellStage: this.startId, //状态
          houseStage: this.stageId, //阶段
          sellTimeRange: this.timeId, //时间
          ynLimit: this.quotaId, //限购
          order: this.order,
          page: this.page,
          limit: 9
        })
        .then(res => {
          this.total = res.data.count;
          this.allHouse = res.data.data;
          this.page = 1;
          this.allHouse.forEach(item => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    // 搜索
    Onipt(val) {
      this.countyId = ""; //区域
      (this.businessAreaId = ""), (this.parkId = ""); //车位
      this.roomId = ""; //卧室数量
      this.priceId = ""; //价格
      this.squareId = ""; //面积
      this.startId = ""; //状态
      this.stageId = ""; //阶段
      this.timeId = ""; //时间
      this.minprice = "";
      this.maxprice = "";
      this.minsquare = "";
      this.maxsquare = "";
      this.mintime = "";
      this.maxtime = "";
      this.quotaId = "";
      this.tags = [
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" },
        { name: "", type: "" }
      ];
      this.Onsearch();
      // this.tags[0].name = this.title;
    },
    // 区域点击
    Onarea(val) {
      (this.title = ""), (this.countyId = val.id);
      this.countyName = val.name;
      if (val.id) {
        this.tags[1].name = val.name;
      } else {
        this.tags[1].name = "";
      }
      this.allTwoHouse = [];
      this.search();
      this.OngetHouseList();
      let unlimited = [
        {
          id: "",
          name: "不限"
        }
      ];
      let allTwoHouse = unlimited;
      if (val.id != "") {
        this.instance
          .getListByPid({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              res.data.data.forEach(item => {
                item.areaName = item.name;
              });
              Array.prototype.push.apply(allTwoHouse, res.data.data);
              this.allTwoHouse = allTwoHouse;
            }
          })
          .catch(function(error) {});
      }
    },
    OnTwoHouse(val) {
      this.businessAreaId = val.id;
      this.OngetHouseList();
      if (val.id) {
        this.tags[1].name = val.name;
      } else {
        if (this.countyName) {
          this.tags[1].name = this.countyName;
        } else {
          this.tags[1].name = "";
        }
      }
    },
    // 车位点击
    Onpark(val) {
      (this.title = ""), (this.parkId = val.id);
      this.search();
      this.OngetHouseList();

      if (val.id) {
        this.tags[2].name = val.name;
      } else {
        this.tags[2].name = "";
      }
    },
    // 居室点击
    Onroom(val) {
      (this.title = ""), (this.roomId = val.id);
      this.search();
      this.OngetHouseList();
      if (val.id) {
        this.tags[3].name = val.name;
      } else {
        this.tags[3].name = "";
      }
    },
    // 价格点击
    Onprice(val) {
      (this.title = ""), (this.priceId = val.id);
      this.search();
      if (this.minprice || this.maxprice) {
        (this.minprice = ""), (this.maxprice = "");
      }
      this.OngetHouseList();
      if (val.id) {
        this.tags[4].name = val.name;
      } else {
        this.tags[4].name = "";
      }
    },
    Onbtnprice() {
      this.title = "";
      this.search();
      if (this.minprice || this.maxprice) {
        this.priceId = this.minprice + "~" + this.maxprice;
      }
      this.tags[4].name = this.priceId + " ( 万元 ) ";
      this.OngetHouseList();
    },
    // 面积
    Onsquare(val) {
      (this.title = ""), (this.squareId = val.id);
      this.search();
      if (this.minsquare || this.maxsquare) {
        (this.minsquare = ""), (this.maxsquare = " ");
      }
      this.OngetHouseList();
      if (val.id) {
        this.tags[5].name = val.name;
      } else {
        this.tags[5].name = "";
      }
    },
    Onbtnsquare() {
      this.title = "";
      this.search();
      if (this.minsquare || this.maxsquare) {
        this.squareId = this.minsquare + "~" + this.maxsquare;
      }
      this.tags[5].name = this.squareId + " (㎡) ";
      this.OngetHouseList();
    },
    // 状态
    Onstart(val) {
      this.title = "";
      this.search();
      this.startId = val.id;
      this.OngetHouseList();
      if (val.id) {
        this.tags[6].name = val.name;
      } else {
        this.tags[6].name = "";
      }
    },
    Onstage(val) {
      this.title = "";
      this.search();
      this.stageId = val.id;
      this.OngetHouseList();
      if (val.id) {
        this.tags[7].name = val.name;
      } else {
        this.tags[7].name = "";
      }
    },
    Onquota(val) {
      this.title = "";
      this.search();
      this.quotaId = val.id;
      this.OngetHouseList();
      if (val.id) {
        this.tags[9].name = val.name;
      } else {
        this.tags[9].name = "";
      }
    },
    // 开拍时间
    Ontime(val) {
      this.title = "";
      this.search();
      this.timeId = val.id;
      if (this.mintime || this.maxtime) {
        (this.mintime = ""), (this.maxtime = "");
      }
      this.OngetHouseList();
      if (val.id) {
        this.tags[8].name = val.name;
      } else {
        this.tags[8].name = "";
      }
    },
    Onbtntime() {
      this.title = "";
      this.search();
      if (this.mintime || this.maxtime) {
        this.timeId = this.mintime + "~" + this.maxtime;
      }
      this.tags[8].name = this.timeId;
      this.OngetHouseList();
    },
    onDetails(item) {
      this.$router.push({ name: "Details", query: { id: item } });
      this.stopBubbling(event);
    }
  },
  components: {
    Header,
    Footer,
    Recommend,
    Right,
    helpMe,
    LoginName
  }
};
</script>
<style lang="less" scoped>
.advert {
  width: 1200px;
  margin: 0 auto;
}
p {
  font-size: 14px;
}
.zoon {
  height: 80px;
}
.screen {
  width: 1200px;
  margin: 20px auto;
  // height: 420px;
  background: #f9f9f9;
  padding: 20px;
  .query {
    display: flex;
    .ipt {
      width: 492px;
      height: 45px;
      border: 1px solid #dfdfdf;
      border-radius: 4px;
      line-height: 45px;
      padding-left: 15px;
    }

    .btn {
      cursor: pointer;
      width: 119px;
      height: 47px;
      background: linear-gradient(0deg, #ef7f00, #e95d39, #f5875d);
      border-radius: 0px 4px 4px 0px;
      line-height: 45px;
      text-align: center;
      color: #fff;
    }
  }
}
.condition {
  margin: 30px 0;
  .list {
    display: flex;
    .text {
      margin-right: 30px;
      color: #333;
    }
    .choice {
      color: #f4643e;
      margin-bottom: 20px;
    }
    .details {
      overflow: hidden;
      float: left;
      cursor: pointer;
      max-width: 1100px;
      p {
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
      }
      .details_color {
        color: #f5643e;
      }
    }
    .fillIn {
      float: left;
      .ipt {
        width: 80px;
        height: 22px;
        background: #ffffff;
        border: 1px solid #d1d1d1;
        border-radius: 2px;
      }
      .ipt1 {
        width: 150px;
        height: 22px;
        background: #ffffff;
        border: 1px solid #d1d1d1;
        border-radius: 2px;
      }
      .btn {
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }
}
.selected {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 50px;
  .select_left {
    float: left;
    span {
      margin-right: 20px;
    }
  }
  .select_right {
    float: right;
    color: #999;
    border-bottom: 1px solid #999;
    cursor: pointer;
  }
}
.houseList {
  width: 1200px;
  margin: 50px auto;
  overflow: hidden;

  .house_fill {
    cursor: pointer;
    text-align: right;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9e9e9;
    .orderColor {
      color: #f5643e;
      margin-right: 25px;
    }
    .orderSpan {
      margin-right: 25px;
      color: #7f858f;
    }
  }
  .house_list {
    overflow: hidden;
    .list {
      cursor: pointer;
      float: left;
      width: 31.33%;
      margin-right: 20px;
      margin-top: 10px;
      .price_img {
        position: relative;
        margin-bottom: 25px;

        .home_img {
          width: 380px;
          height: 214px;
          border-radius: 6px;
          margin-bottom: 35px;
        }
        .soon {
          position: absolute;
          top: 0;
          width: 89px;
          height: 31px;
          border-radius: 6px 0px 6px 0px;
          line-height: 31px;
          text-align: center;
          font-size: 14px;
          color: #fff;
        }
        .soonGreen {
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
        }
        .soonRed {
          background: #d91615;
        }
        .heart {
          position: absolute;
          right: 0;
          top: 0;
        }
        .home {
          position: absolute;
          top: 180px;
          right: 20px;
          width: 46px;
          height: 20px;
          background: #f5643e;
          border-radius: 2px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          font-size: 12px;
        }
        .time {
          position: absolute;
          top: 200px;
          left: 20%;
          width: 226px;
          height: 33px;
          background: #ffffff;
          box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
          border-radius: 17px;
          line-height: 33px;
          text-align: center;
          font-size: 13px;
          color: #7d7b7b;
        }
      }
      .list_title {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 15px;
      }
      .hall {
        padding: 3px;
        margin-right: 5px;
        font-size: 12px;
        color: #ff6565;
        background: #fff3f3;
      }
      .centare {
        padding: 3px;
        margin-right: 5px;
        font-size: 12px;
        color: #ff9555;
        background: #fff5df;
      }
      .orientation {
        padding: 3px;
        margin-right: 5px;
        font-size: 12px;
        color: #17d1bb;
        background: #e7f9f7;
      }
      .price {
        margin: 13px 0px;
        color: #656967;
      }
      .price_img {
        width: 380px;
        height: 254px;
      }
      .startPrice {
        overflow: hidden;
        .start {
          float: left;
          span {
            color: #f4643e;
          }
        }
        img {
          float: right;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .block {
    text-align: center;
    margin-top: 50px;
  }
}
</style>
